<template>
<div class="project-card-wrapper">
    <Card style="width: 304px; height:260px;" :bordered="false">
        <div slot="title" class="main pointer" @click="editPanelShow">
            <!--  @click="editPanelShow" -->
            <img :src="panel.layoutUrl" class="image">
        </div>
        <div slot="extra" class="operation">
            <Poptip trigger="hover" placement="bottom-start" ref="poptip">
                <a style=""><i class="zlstbd-icon-more"/></a>
                <div slot="content" class="poptip-content">
                    <ul>
                        <li @click="edit">
                            <p>基本信息编辑</p>
                        </li>
                        <li @click="editPanel">
                            <p>编辑面板元件</p>
                        </li>
                        <li @click="copyPanel">
                            <p>复制面板</p>
                        </li>
                        <!-- <li @click="editPanelScan">
                            <p>浏览面板</p>
                        </li> -->
                        <!-- delete -->
                        <!-- <li @click="exportPanel">
                            <p>导出</p>
                        </li> -->
                        <li @click="viewDatasource">
                            <p>查看数据源</p>
                        </li>
                        <li @click="deletePanel">
                            <p>删除</p>
                        </li>
                    </ul>
                </div>
            </Poptip>
        </div>
        <div class="more-content pointer">
            <p class="more-content-name" :title="panel.layoutName">{{panelLayoutName}}</p>
            <p class="more-content-label"></p>
            <!-- <p class="more-content-label" style="height:21px" :title="panel.layoutTag">{{panelLayoutTag}}</p> -->
            <p class="more-content-user ">
                <span class="pull-left"><span class="zlstbd-icon-personal-center m-r-5"></span>{{panel.createName}}</span>
                <span class="pull-right m-r-10">{{panel.createTime | date}}</span></p>
        </div>
    </Card>
    <fullModal v-model="modal.datasource">
        <panel-datasource ref="panelDatasource" :panel="panel"></panel-datasource>
    </fullModal>
</div>
</template>

<script>

import panelDatasource from './panel-datasource'
import fullModal from '@/components/common/fullmodal.vue'

export default {
    components: {
        panelDatasource,fullModal
    },
    props: {
        panel: {
            type: Object,
        }
    },

    data () {
        return {
            modal:{
                datasource:false,
            },
        }
    },
    computed:{
        panelLayoutTag(){  //19
            let value = "";
            if(this.panel.layoutTag != null && this.panel.layoutTag != ""){
                if(this.panel.layoutTag.length > 19){
                    value = this.panel.layoutTag.substring(0,19).replace(/;|；/g, " ") + "...";
                }else{
                    value = this.panel.layoutTag.replace(/;|；/g, " ");
                }

            }else{
                value = "-"
            }
            return value;
        },
        panelLayoutName(){
            let value = "";
            if(this.panel.layoutName.length > 17){
                value = this.panel.layoutName.substring(0,17) + "...";
            }else{
                value = this.panel.layoutName;
            }
            return value;
        }
    },
    methods: {
        edit() {
            this.$refs.poptip.cancel();
            this.$emit('edit', this.panel);
        },
        viewDatasource(){
            this.modal.datasource = true;
        },
        editPanel(){
            this.$emit('editPanel', this.panel);
        },
        editPanelShow(){
            this.$emit('editPanelShow', this.panel);
        },
        editPanelScan(){
            this.$emit('editPanelScan', this.panel);
        },
        copyPanel(){
            this.$emit('copyPanel', this.panel);
        },
        deletePanel(){
            this.$emit('deletePanel', this.panel);
        },
        exportPanel(){
            this.$emit('exportPanel', this.panel);
        }
    }

}
</script>
